<template>
	<div style="padding: 10px">
		<el-form class="g_form" style="justify-content: space-between">
			<div class="g_form">
				<el-form-item label="用户账号：" class="g_form_item">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>

				<el-form-item label="用户账号：" class="g_form_item">
					<el-input v-model="form.registerCode"></el-input>
				</el-form-item>

				<el-button type="primary" class="g_button" @click="getData">查询</el-button>
			</div>
			<el-button type="info" class="g_button_right" @click="showAdd">新建</el-button>
		</el-form>

		<table-components :tableLoading="tableLoading" :tableData="tableData" class="g_table" @currentChange="currentChange" @sizeChange="sizeChange">
			<el-table-column :prop="item.key" :label="item.title" align="left" v-for="(item, index) in columns" :key="index">
				<template v-if="item.key == 'user_info'" v-slot="scope">
					{{ scope.row.user_info.account }}
				</template>
				<template v-if="item.key == 'createdAt'" v-slot="scope">
					{{ formatDate(scope.row.createdAt) }}
				</template>
			</el-table-column>
		</table-components>

		<addDialog ref="addDialogRef"></addDialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import tableComponents from '/@/components/tableComponents/index.vue';
import { getDeviceList } from '/@/api/api';
import addDialog from './dialog/add.vue';
import { formatDate } from '/@/utils/util';

const tableLoading = ref();
const tableData = reactive({
	size: 10,
});
const form = ref({});
const columns = [
	{
		title: 'ID',
		dataIndex: '_id',
		key: 'id',
	},
	{
		title: '创建时间',
		dataIndex: 'createdAt',
		key: 'createdAt',
	},
	{
		title: '注册码',
		dataIndex: 'registerCode',
		key: 'registerCode',
	},

	{
		title: '用户账号',
		dataIndex: 'user_info',
		key: 'user_info',
	},
	{
		title: '设备号',
		dataIndex: 'deviceCode',
		key: 'deviceCode',
	},
];

async function getData() {
	let { code, data } = await getDeviceList({
		page: tableData.page,
		pageSize: tableData.size,
	});
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
	}
}

const addDialogRef = ref();
function showAdd() {
	addDialogRef.value.showModal();
}

// 页码数量改变
function sizeChange(size) {
	tableData.size = size;
	getData();
}

// 翻页
function currentChange(page) {
	tableData.page = page;
	getData();
}

// 页面加载时
onMounted(() => {
	NextLoading.done();

	getData();
});
</script>

<style scoped lang="scss"></style>
